<template>
    <div class="Response-block-style">
        <div class="Response-block">
            <div class="Response-name">常规</div>
            <div class="Response-text">
                <div class="Response-line">
                    <span class="Response-label">Request URL: </span>{{general.url}}
                </div>
                <div class="Response-line">
                    <span class="Response-label">Request Method: </span>{{general.type}}
                </div>
                <div class="Response-line">
                    <span class="Response-label">Status Code: </span>
                    <span class="Response-icon" v-if="general.code" :style="{background: general.code == 200 ? '#00BE00' : '#F00'}"></span>
                    {{general.codeText}}
                </div>
            </div>
        </div>
        <div class="Response-block">
            <div class="Response-name">请求头部</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index) in request" :key="index">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
        <div class="Response-block" v-if="response.length">
            <div class="Response-name">响应头部</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index2) in response" :key="index2">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
        <div class="Response-block" v-if="search.length">
            <div class="Response-name">url 参数</div>
            <div class="Response-text">
                <div class="Response-line" v-for="(item,index3) in search" :key="index3">
                    <span class="Response-label">{{item.key}}: </span>{{item.value}}
                </div>
            </div>
        </div>
        <div class="Response-block">
            <div class="Response-name">body 参数</div>
            <div class="Response-text">
                <div class="Response-line">
                    <code>{{body}}</code>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const general = ref({
    type: '',
    url: '',
    code: '',
    codeText: '',
})
const request = ref([]);
const response = ref([]);
const body = ref([]);
const search = ref([]);

const clear = () => {
    general.value = { type: '', url: '', code: '', codeText: '', };
    request.value = [];
    response.value = [];
    body.value = [];
    search.value = [];
}
const setValue = (data) => {
    general.value.url = data.config.url;
    general.value.type = data.config.method.toUpperCase();
    general.value.codeText = data.status + ' ' + data.statusText;
    general.value.code = data.status;

    for (const key in data.config.headers) {
        const element = data.config.headers[key];
        request.value.push({
            key: key,
            value: element
        });
    }

    for (const key in data.config.params) {
        const element = data.config.params[key];
        search.value.push({
            key: key,
            value: element
        });
    }

    for (const key in data.headers) {
        const element = data.headers[key];
        response.value.push({
            key: key,
            value: element
        });
    }

    body.value = JSON.stringify(data.config.data);

}
defineExpose({
    setValue,
    clear
})

</script>
<style lang="less" scoped>
    .Response-name { color: #666; font-size: 12px; padding: 3px 0 3px 0; }
    .Response-text { border-bottom: 1px solid #dedede; font-size: 12px; padding: 0 10px 5px 10px; }
    .Response-block-style { padding: 10px; background-color: #fff; }
    .Response-line { padding: 3px 0;  color: #666; word-break:break-all; word-wrap:break-word; font-family: consola !important;}
    .Response-label { font-weight: bold;}
    .Response-block-style .Response-block:last-child  .Response-text { border : none}
    .Response-icon { display: inline-block; width: 10px; height: 10px; border-radius: 50%;}
</style>